<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Material</title>
    <script src="../../dist/dist_v1.0.1.js"></script>
</head>
<body>
<canvas id="game" style="width: 800px;height: 600px;background-color: black;"></canvas>
</body>
<script>

    // vars
    let canvas;//, monkey1,monkey2;

    function start(){
        canvas = document.getElementById('game');
        let width = canvas.clientWidth;
        let height = canvas.clientHeight;

        // 下面两句不能掉,否则显示不出来
        canvas.width = width;
        canvas.height = height;
        console.log(`width:${width},height:${height}`);

        let gl = canvas.getContext('webgl');
        if (!gl){
            throw 'get gl context error!'
        }

        renderer = new engine.Renderer2(gl,width,height);
        camera = new engine.Camera(0,10,20);
        scene = new engine.Scene();

        // let basicMaterial = new engine.BasicMaterial(
        //     engine.VertexCache.get("monkey"),
        //     new engine.Color(0xff0000ff));
        // monkey1 = new engine.GameItem(basicMaterial);
        // monkey1.position[0] = 0;
        // scene.addObject(monkey1);

        // let lambertMaterial = new engine.LambertMaterial(
        //     engine.VertexCache.get("female"),
        // );
        // monkey2 = new engine.GameItem(lambertMaterial);
        // monkey2.position[0] = 2;
        // monkey2.position[2] = -2;
        // monkey2.scale[0] = monkey2.scale[1] = monkey2.scale[2] = 0.02;
        // scene.addObject(monkey2);


        // 创建10个球
        let size = 30;
        for(let i = 0; i < 20; ++i){
            // sphere
            let ball = new engine.GameItem(new engine.LambertMaterial(
                engine.VertexCache.get("sphere")
            ));
            let x = Math.random() * size - size/ 2;
            let y = 0;// Math.random() * 2 - 1;
            let z = -Math.random() * size + size/ 2;
            engine.vec3.set(ball.position,x,y,z);
            scene.addObject(ball);
        }


        // cube
        // let cubeObj = new engine.GameItem(new engine.LambertMaterial(engine.VertexCache.get('cube')));
        // cubeObj.position[0] = 2;
        // cubeObj.position[2] = -2;
        // scene.addObject(cubeObj);

        window.addEventListener("keydown",onkeyDown,false);
        canvas.addEventListener("mousedown",onMouseDown,false);

        loop();
    }

    //---------------------------
    //  begin
    window.onload = function () {

        // 添加内置的
        engine.VertexCache.add("plane",engine.plane(10,10,10,10));
        engine.VertexCache.add("cube",engine.cube(2,2,2));
        engine.VertexCache.add("sphere",engine.sphere(2,10,10));


        let monkeyPromis = engine.resLoader.loadObj("../assets/monkey.obj");
        let femalePromise = engine.resLoader.loadObj("../assets/female02.obj");
        Promise.all([monkeyPromis,femalePromise]).then((arr)=>{
            engine.VertexCache.add('monkey',engine.ObjParser.loadMesh(arr[0]));
            engine.VertexCache.add('female',engine.ObjParser.loadMesh(arr[1]));
            start();
        });
    };

    let renderer,scene,camera;
    let last  = Date.now();
    let selected = null;
    function loop() {
        requestAnimationFrame(loop);

        let cur = Date.now();
        let dtMs = cur - last;
        last = cur;

        frame(dtMs / 1000)
    }

    function frame(dt) {
        renderer.render(scene,camera);
    }

    function onkeyDown(event) {
        // console.log(event);
        if (event.key == 'a'){ // a
            console.log('a clicked!');
            // 暂时还不能换材质
            //
            // monkey1.material.color.seti(0,255,255,255);
            monkey1.replaceMaterial(new engine.LambertMaterial(
                engine.VertexCache.get('monkey'),
                new engine.Color(0x00ff00ff)
            ));
        }
    }


    function onMouseDown(event) {
        //1
        let rect = canvas.getBoundingClientRect();
        //2
        let x = event.clientX - rect.left * (canvas.width / rect.width);
        let y = event.clientY - rect.top * (canvas.height / rect.height);
        console.log("x:"+x+",y:"+y);

        let item = scene.pick(x,y,camera);
        if (item != null){
            if (selected != item){
                if (selected != null){
                    selected.material.color.setf(1,1,1,1);
                }
                item.material.color.setf(0,1,0,1);
                selected = item;
            }
        }else{
            if (selected!=null){
                selected.material.color.setf(1,1,1,1);
            }
        }
    }
</script>
</html>
